<template>
	<view class="" :data-theme="theme" :style="globalColor.style">
		<!-- 找专业 -->
		<header-custom
			title=""
			ref="headerRef"
			:isSearch="true"
			@change="searchChange"
		></header-custom>

		<!-- 筛选导航 -->
		<view
			class="filter-header w750 fboxRow Ycenter"
			:style="{ top:headTop + 'px' }"
		>
			<view class="wrap w750 fboxRow Ycenter">
				<view class="filter-key flex1 fboxRow Ycenter Xend" @click="filterClick">
					<view class="color-6A6A6F font22">{{ filters.major.name }}</view>
					<view class="color-6A6A6F font22" v-if="filters.type.level2Name">
						{{ filters.major.name ? ', ' : '' }}{{ filters.type.level2Name }}
					</view>
					<text class="bksCIcon bks-c-ziyuan13shaixuan font26"></text>
				</view>
			</view>
		</view>
		<u-popup :show="popupFilter" @close="onClose" mode="top" :safeAreaInsetTop="true" zIndex="10" overlayStyle="z-index: 4">
			<view class="fboxCol">
				<view :style="{height: headTop+'px'}"></view>
				<view :style="{height: topNavHeight+'px'}"></view>
				<block v-for="(item, index) in filterList" :key="index">
					<view class="filter-item">
						<view class="tit fboxRow Ycenter font22 color-9899A1">
							{{ item.title }}
						</view>
						<view class="fboxWrap">
							<block v-for="(_item, _index) in filterData[item.key]" :key="_index">
								<view
									class="tag fboxRow Ycenter Xcenter font24"
									:class="{ on: _item.on ? true : false }"
									@click="tagClick(_item)"
								>
									{{ _item.name || _item.level2Name }}
								</view>
							</block>
						</view>
					</view>
				</block>
				<view class="bottom"></view>
				<view class="bottom-btn fboxRow">
					<view class="colse flex1 fboxRow Ycenter Xcenter color-36363A" @click="onClose">
						关闭
					</view>
					<view class="filter flex1 fboxRow Ycenter Xcenter color-fff" @click="onSubmit">
						筛选
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 列表 -->
		<view class="scroll-view" id="scroll-view" style="padding-top: 72rpx">
			<!-- 间距 -->
			<view class="space-block"></view>
			<block v-for="(item, index) in dataList.list" :key="index">
				<view class="scroll-view-item">
					<major-module :info="item" />
				</view>
			</block>
			<list-loading :loading="dataList.loading" />
		</view>
	</view>
</template>

<script>
import headerCustom from '@/pagesBKS/components/header-custom.vue';
import majorModule from '@/pagesBKS/components/major-module.vue';
import listLoading from '@/pagesBKS/components/list-loading.vue';
import { majorList, majorType } from '@/api/bks.examinee.js';
import { conferenceDetailForOrg } from '@/api/h5';

export default {
	components: {
		headerCustom,
		majorModule,
		listLoading
	},
	data() {
		return {
			theme: 'bks-theme',
			globalColor: getApp().globalData.globalColor,
			title: '专业',
			sys: {},
			searchConfig: {
				show: true,
				placeholder: '请输入专业名称',
				value: '',
				pageto: true,
				url: '/pages/index/major/list/index'
			},
			dataList: {
				list: [
					// {majorCategoryId: "1", name: "哲学", level1Name: "本科", level2Name: "哲学"}
				],
				page: 1,
				size: 10,
				count: 0,
				loading: 'none'
			},
			refresherTriggered: false,
			filters: {
				major: {
					id: '',
					name: '所有专业'
				},
				type: {
					level2: '',
					level2Name: ''
				},
				search: ''
			},
			popupFilter: false,

			// 这里是一些组件内部数据
			filterList: [
				{
					title: '专业层次',
					key: 'level'
				},
				{
					title: '专业类型',
					key: 'type'
				}
			],
			headTop:44,
			filterData: {
				level: [
					{ id: '', name: '不限' },
					{ id: 1, name: '普通本科' },
					{ id: 2, name: '专科' }
				],
				type: [
					// {level2: "0", level2Name: ""}
				]
			},
			topNavHeight: 0
		};
	},
	onLoad() {
		const data = uni.getSystemInfoSync();
		this.request();
		this.typeList();
	},
	onReady() {
		uni.createSelectorQuery(this).selectAll('#scroll-view')
		.boundingClientRect(res => {
			this.topNavHeight = res[0].top
		})
		.exec();
		const dataH = this.$refs.headerRef
		this.headTop = dataH.$el.offsetHeight
	},
	onReachBottom() {
		if (this.dataList.size * this.dataList.page < this.dataList.count) {
			this.dataList.loading = 'loading';
			this.dataList.page++;
			this.request();
		} else {
			this.dataList.loading = 'nomore';
		}
	},
	onPullDownRefresh() {
		this.initData();

		this.request();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		searchChange(val) {
			this.dataList.loading = 'noDdata';
			this.search = val;
			this.dataList.list = [];
			this.dataList.page = 1
			this.request();
		},
		typeList() {
			majorType({ level1: this.filters.major.id }).then((res) => {
				this.filterData.type = res.data;
			});
		},
		request() {
			// 已经没有数据了
			if (this.dataList.loading == 'not') {
				return;
			}
			// 加载更多数据
			this.dataList.loading = 'loading';
			const {
				dataList: { list, page, size },
				filters: { major, type, search }
			} = this;

			const reqData = {
				level2: this.search ? '' : type.level2,
				type: this.search ? '' : major.id,
				searchWord: this.search,
				page,
				size
			};
			majorList(reqData)
				.then((res) => {
					const total = res.data.pageInfoVO.total;
					const countList = [...list, ...res.data.list];
					this.dataList.list = countList;
					this.dataList.count = total;

					if (countList.length >= total && total > 0) {
						this.dataList.loading = 'not';
					} else if (total <= 0) {
						this.dataList.loading = 'noDdata';
					} else {
						this.dataList.loading = 'none';
					}
				})
				.catch((err) => {
					this.dataList.loading = 'noDdata';
				});
		},
		initData() {
			this.dataList = { list: [], page: 1, size: 10, count: 0 };
		},
		// 点击选择
		filterClick() {
			this.popupFilter = !this.popupFilter
		},
		onClose() {
			this.popupFilter = false;
		},
		onSubmit() {
			this.initData();
			this.request();
			this.popupFilter = false;
		},
		// 点击标签
		tagClick(val) {
			let key = '';
			if (val.id || val.name == '不限') {
				key = 'level';
			} else {
				key = 'type';
			}
			let tag = val;

			let list = [];
			if (key == 'level') {
				let major = tag;
				if (tag.on && tag.name == '不限') {
					major = { id: '', name: '所有专业' };
				}
				this.filters.major = major;
				this.filters.type = { level2: '', level2Name: '' };
				this.typeList();
			} else if (key == 'type') {
				if (this.filters.major.name == '所有专业') {
					this.filters.major = { id: '', name: '' };
				}
				const level = tag.on ? { level2: '', level2Name: '' } : tag;
				this.filters.type = level;
			}
			// 设置选中状态
			this.filterData[key].filter((item) => {
				if (JSON.stringify(item) == JSON.stringify(tag)) {
					item.on = !item.on;
				} else {
					item.on = false;
				}
				list.push(item);
			});
			const tit = 'filterData.' + key;
			this.filterData[key] = list
		}
	}
};
</script>

<style scoped lang="scss">
/* pages/index/school/search/index.wxss */
.filter-header {
	height: 72rpx;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	background-color: #fff;
	border-bottom: 1px solid #f0f0f5;
	z-index: 20;
}
.filter-header .wrap {
	padding: 0 30rpx;
	width: 100%;
}
.filter-key .bksCIcon {
	margin-left: 10rpx;
}
.icon-filter {
	width: 40rpx;
	height: 40rpx;
	line-height: 40rpx;
	text-align: center;
	border-radius: 50%;
}

.scroll-view {
	position: relative;
	z-index: 0;
	background-color: #fff;
}

.filter-item {
	padding: 5rpx 10rpx 5rpx 30rpx;
}
.filter-item .tit {
	height: 54rpx;
}
.filter-item .tag {
	margin: 10rpx 20rpx 10rpx 0;
	padding: 4rpx 14rpx;
	width: 157rpx;
	min-height: 54rpx;
	line-height: 40rpx;
	text-align: center;
	background-color: #f5f5fa;
	color: #6a6a6f;
	border-radius: 4rpx;
	word-wrap: break-word;
	word-break: normal;
	overflow: hidden;
}
.filter-item .on {
	background-color: #ebfaf1;
	color: #00c15d;
}
.bottom {
	height: 88rpx;
}
.bottom-btn {
	// position: fixed;
	left: 0;
	width: 100%;
	height: 88rpx;
	border-top: 1px solid #f0f0f5;
	z-index: 7;
}
.bottom-btn .colse {
	background-color: #fff;
}
.bottom-btn .filter {
	background: linear-gradient(-90deg, #00b356 0%, #79dba8 100%);
}
</style>
